import React,{useState,useEffect} from 'react'
import { Link,useHistory,Route,Redirect,useRouteMatch } from 'react-router-dom';
import { useRequest } from './Hooks';

//react-router-dom 的Hooks方法
//useHistory



const Home = () => {
    const [topics,setOptions,options] = useRequest('https://cnodejs.org/api/v1/topics');
    const history = useHistory();
    const {path,url} = useRouteMatch();
    const tabs = [
        {title: '全部',tab:'all'},
        {title: '精华',tab:'good'},
        {title: '分享',tab:'share'},
        {title: '问答',tab:'ask'}
    ]
    const pageButton = [1,2,3,4,5,6,7,8,9];

    return (
        <ul>
            <div style={{height: 100}}> 
                <Link to={`${url}/all`}>全部</Link>
                <Link to={`${url}/share`}>分享</Link>
                <Link to={`${url}/good`}>精华</Link>
                <div>
                    <Route path={`${path}/all`} render={()=><h1>全部</h1>} />
                    <Route path={`${path}/share`} render={()=><h1>分享</h1>} />
                    <Route path={`${path}/good`} render={()=><h1>精华</h1>} />
                    <Redirect to={`/home/all` }/>
                </div>
            </div>
            <div>
                {
                    pageButton.map((item)=>(
                        <button
                            style={{width:20,height:20,backgroundColor:'SteelBlue',color:'Ivory',margin:3,borderRadius:5,outline:0}}
                            key={item}
                            onClick={()=>setOptions({...options,page:item})}
                        >
                            {item}
                        </button>
                    ))
                }
            </div>
            <div>
                {
                    tabs.map((item)=>(
                        <button
                            style={{width:40,height:25,backgroundColor:'SteelBlue',color:'Ivory',margin:3,borderRadius:5,outline:0}}
                            key={item.tab}
                            onClick={()=>setOptions({tab:item.tab,page:1})}
                        >
                            {item.title}
                        </button>
                    ))
                }
            </div>
            {/* <div>
                <button>全部</button>
                <button onClick={()=>setOptions({tab:'share'})}>分享</button>
                <button onClick={()=>setOptions({tab:'good'})}>精华</button>
            </div> */}
            {
                // topics.map(item=><li key={item.id}>
                //     {/* <Link to={'/detail/'+item.id}>{item.title}</Link> */}
                //     <Link to={`/detail/${item.id}`}>{item.title}</Link>
                // </li>)
                topics.map(item=>(
                    <li
                        key={item.id}
                        onClick={()=>history.push(`/detail/${item.id}`)}
                    >
                        {item.title}
                    </li>
                ))
            }
        </ul>
    )
}
export default Home